<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas演示</title>
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="800" style="border: 1px solid black;">
			您的浏览器不支持canvas，建议使用最新版的Chrome
		</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");//获取该canvas的2D绘图环境对象
			ctx.fillRect(10,10,30,30); //从画布上的（10，10）坐标点为起始点，绘制一个宽高均为50的实心矩形
			ctx.strokeRect(60,10,30,30); //从画布上的（70，10）坐标点为起始点，绘制一个宽高均为50的描边矩形
			ctx.fillStyle = "red"; //填充颜色
			ctx.strokeStyle = "blue"; 
			ctx.fillRect(110,10,30,30);	//填充坐标位置
			ctx.strokeRect(160,10,30,30);
			
			//实行矩形渐变效果
			
			//定义从上到下的渐变，作为矩形的渐变效果
			var my_gradient=ctx.createLinearGradient(0,0,0,170);
			my_gradient.addColorStop(0,"blue");
			my_gradient.addColorStop(1,"white");
			ctx.fillStyle=my_gradient;
			ctx.fillRect(10,60,50,50);
			
			//定义从左到右的渐变，作为矩形的渐变效果
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
			var my_gradient=ctx.createLinearGradient(0,0,170,0);
			my_gradient.addColorStop(0,"black");
			my_gradient.addColorStop(1,"yellow");
			ctx.fillStyle=my_gradient;
			ctx.fillRect(70,60,50,50);
			
			//定义从黑到红到蓝的的渐变，作为矩形的渐变效果
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
			var my_gradient=ctx.createLinearGradient(0,0,170,0);
			my_gradient.addColorStop(0,"black");
			my_gradient.addColorStop(0.5,"red");
			my_gradient.addColorStop(1,"white");
			ctx.fillStyle=my_gradient;
			ctx.fillRect(130,60,50,50);
			
			//描边矩形渐变效果
			var gradient=ctx.createLinearGradient(0,0,170,0);
			gradient.addColorStop("0","magenta");
			gradient.addColorStop("0.5","blue");
			gradient.addColorStop("1.0","red");
			// 用渐变进行填充
			ctx.strokeStyle=gradient;
			ctx.lineWidth=5;
			ctx.strokeRect(10,130,50,50);
			
			//直线
			ctx.moveTo(10,200);
			ctx.lineTo(80,250);
			ctx.stroke();
			ctx.strokeRect(10,200,70,50);
			
			//火柴人
			var x = document.getElementById("myCanvas");
			var hr = x.getContext("2d");
			hr.strokeStyle = "black"; 
			
			hr.beginPath();
			hr.arc(200, 305, 35, 0, 2*Math.PI);
			hr.lineWidth=5; 
			hr.stroke();
			//头
			hr.beginPath();
			hr.moveTo(200, 340);
			hr.lineTo(200, 355);
			hr.stroke();
			//身体
			hr.beginPath();
			hr.moveTo(200, 355);
			hr.lineTo(200, 450);
			hr.lineWidth = 22;
			hr.stroke();
			//左手
			hr.beginPath();
			hr.moveTo(200, 385);
			hr.lineTo(150, 370);
			hr.lineTo(130, 350);
			hr.lineWidth = 15;
			hr.stroke();
			//左拳头
			hr.beginPath();
			hr.arc(130, 350, 7.5, 0, 2 * Math.PI, true);
			hr.fillStyle = 'black';
			hr.fill();
			//右手
			hr.beginPath();
			hr.moveTo(200, 385);
			hr.lineTo(260, 390);
			hr.lineTo(270, 420);
			hr.lineWidth = 15;
			hr.stroke();
			//右拳头
			hr.beginPath();
			hr.arc(270, 420, 7.5, 0, 2 * Math.PI, true);
			hr.fillStyle = 'black';
			hr.fill();
			//左脚
			hr.beginPath();
			hr.moveTo(200, 450);
			hr.lineTo(130, 430);
			hr.lineTo(170, 480);
			hr.lineWidth = 15;
			hr.stroke();
			//右脚
			hr.beginPath();
			hr.moveTo(200, 450);
			hr.lineTo(300, 470);
			hr.lineWidth = 15;
			hr.stroke();
			
			//文字
			var z = document.getElementById("myCanvas");
			var wz = z.getContext("2d");
			wz.lineWidth = 2;
			wz.font= "30px Arial";
			wz.strokeText("Welocome",50,600)
		</script>
	</body>
</html>